<!DOCTYPE html>

<html>
    <head>
        <title>#{get 'title' /}</title>
        <meta charset="${_response_encoding}">
        <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/main.css'}">
        <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/bootstrap.css'}">
        <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/eventstyle.css'}">
        <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/jquery-ui-1.8.13.custom.css'}">
        #{get 'moreStyles' /}
        <link rel="shortcut icon" type="image/png" href="@{'/public/images/jumping_man_finale2_little2.png'}">
        <script src="@{'/public/javascripts/jquery-1.6.4.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
        <script src="@{'/public/javascripts/datepicker.js'}" type="text/javascript" charset="utf-8"></script>
        <script src="@{'/public/javascripts/jquery-ui-1.8.13.custom.min.js'}" type="text/javascript" charset="utf-8"></script>
		<script src="@{'/public/javascripts/dialog.js'}" type="text/javascript" charset="utf-8"></script>
		#{get 'moreScripts' /}
    </head>
    <body data-dateformat="${play.configuration['date.format']}">
    	
   		<header>
				<a href="@{Application.home()}">
				<div id="logo"></div>
				Make your own events and activities
				</a>
		</header>
		<div class="barheader"></div>
		<div class="container">
			<div id="adds">adds
			</div>
			
		<h3>Registration form</h3>	
			
       	#{if flash.error}
  	  	<p style="color:#c00">
   	     ${flash.error}
   	 	</p>
		#{/if}
       <form action="@{UserManager.newUser()}" method="GET">
          <table border="0" cellpadding="2" cellspacing="25">
            <tr>
               <td>First Name*</td>
               <td>
               <input name="firstName" type="text" size="30" maxlength="30" value="${flash.firstName}"></td>
               <td><span class="error" style="color:#c00">#{error 'firstName' /}</span></td>
               <td>Last Name*</td>
               <td><input name="lastName" type="text" size="30" maxlength="30" value="${flash.lastName}"></td>
               <td><span class="error" style="color:#c00">#{error 'lastName' /}</span></td>
            </tr>
            <tr>
               <td>E-mail address*</td>
               <td><input name="email" type="text" size="50" maxlength="50" value="${flash.email}"></td>
           	   <td><span class="error" style="color:#c00">#{error 'email' /}</span></td>
            </tr>
            <tr>
               <td>User Name*</td>
               <td><input name="userName" type="text" size="30" maxlength="30" value="${flash.userName}"></td>
               <td><span class="error" style="color:#c00">#{error 'userName' /}</span></td>
            </tr>
            <tr>
               <td>Password**</td>
               <td><input name="password" type="password" size="30" maxlength="30"></td>
               <td><span class="error" style="color:#c00">#{error 'password' /}</span></td>
               <td>Repeat password**</td>
               <td><input name="repeatPassword" type="password" size="30" maxlength="30"></td>
               <td><span class="error" style="color:#c00">#{error 'repeatPassword' /}</span></td>
            <tr>
            <tr>
               <td>Gender*</td>
               <td><select name="gender" size="1" value=""${flash.gender}"">
                      <option>Please select</option>
                      <option>male</option>
                      <option>female</option>
                   </select>
               </td>
               <td><span class="error" style="color:#c00">#{error 'gender' /}</span></td>
            </tr>
            <tr>
               <td>Date of birth*</td>
			   <td><input type="text" class="date" name="date" value="${flash.date}"></td>
               <td><span class="error" style="color:#c00">#{error 'date' /}</span></td>                   
            </tr>
            <tr>
               <td>Town*</td>
               <td><input name="town" type="text" size="20" maxlength="20" value="${flash.town}"></td>
               <td><span class="error" style="color:#c00">#{error 'town' /}</span></td>
            </tr>    
            <tr>
               <td>Phone number</td>
               <td><input name="phoneNumber" type="text" size="20" maxlength="20" value="${flash.phoneNumber}"></td>
            </tr> 
            <tr>
               <td></td>
               <td></td>
               <td>
                  <input type="submit" value="Register">                   
               </td>
               <td></td>
               <td></td>               
            </tr>           
          </table>          
       </form>
       <p>By registering, you agree to MyNewEv's
          <a href="@{UserManager.condOfUse()}">Conditions of Use</a> and 
          <a href="@{UserManager.privacyNotice()}">Privacy Notice</a>.</p>         

       </p>
       <p>* is required to create an account</p>
       <p>** the password must contain at least 8 characters